<template>
	<view class="map_wrap">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100vw; height: 100vh;" :scale="3" :latitude="latitude" :longitude="longitude"
					@callouttap="out" :markers="covers" @markertap="mark">
				</map>
			</view>
			<view class="meng" v-if="stas">
				<view class="tan" v-for="(item,index) in state1" key="index">
					<view class="tan1">
						<view class="header">
							<h1>{{conten}}</h1>
						</view>
						<view class="content">
							<view class="im">
								<img style="width: 100%;height: 14vh;border-radius: 2vh;" :src="item.img" alt="">
							</view>
							<view class="ad">
								<h1>{{content}}</h1>
								<h1>{{item.address}}</h1>
								<h1>{{item.sheng}}</h1>
							</view>
						</view>
						<view class="bottom">
							<view class="right">
								<button style="background-color: aquamarine;color: white;width: 272%;margin-top: 2vh;"
									@click="go">手机导航</button>
							</view>
						</view>
					</view>
					<view class="scd" @click="onbtn1">
						X
					</view>
				</view>
			</view>
			<view class="meng" v-if="sta">
				<view class="tan" v-for="(item,index) in state" key="index">
					<view class="tan1">
						<view class="header">
							<h1>{{conten}}</h1>
						</view>
						<view class="content">
							<view class="im">
								<img style="width: 100%;height: 14vh;" :src="item.img" alt="">
							</view>
							<view class="ad">
								<h1>{{content}}</h1>
								<h1>{{item.iphone}}</h1>
								<h1>{{item.name}}</h1>
							</view>
						</view>
						<view class="bottom">
							<view class="left">
								<button style="border-radius: 10px;margin-top: 2vh;">联系门店</button>
							</view>
							<view class="right">
								<button style="background-color: aquamarine;color: white;margin-top: 2vh;">立即下单</button>
							</view>
						</view>
					</view>
				</view>
				<view class="scd" @click="onbtn">
					X
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.924232,
				longitude: 116.403694,
				sta: false,
				stas: false,
				conten: "",
				content:"",
				lat: 0,
				lud: 0,
				state: [{
					title: "回收站来福士广场店",
					title1: "上海市来福士广场1层32号",
					iphone: "15175869348",
					name: "陈先生",
					img: "https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
				}],
				state1: [{
					title: "OMINI人民广场自助投放点",
					title1: "上海市人民广场北侧",
					address: "距离 658 米 ",
					sheng: "剩余空间  4㎡/64㎡",
					img: "https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
				}],
				covers: []
			}
		},
		mounted() {
			this.getState()
		},
		methods: {
			getState() {
				let that = this;
				uni.request({
					url: 'http://localhost:7890/yzb/getshop', //仅为示例，并非真实接口地址。
					data: {
						text: 'uni.request'
					},
					method: 'GET',
					success: (res) => {
						// console.log(res.data);
						this.text = 'request success';
						let arr = res.data.data;
						arr.forEach((i, index) => {
							i.id = index + 1;
							i.callout = { //自定义标记点上方的气泡窗口 点击有效
								content: i.name,
								display: "ALWAYS", //显示方式
								color: "#ffffff",
								fontSize: 12,
								bgColor: "#f70000",
								borderRadius: 5,
								padding: "10", //文本边缘留白，文字和边界宽度
								iconPath: "",
								anchorY: -20,
							}
						})
						that.covers = arr;
					}
				});
			},
			go() {
				let lat = this.lat
				let lud = this.lud
				let name = this.conten
				uni.navigateTo({
					url: "/pages/Ditu/Ditu/Ditu?lat=" + lat + '&lud=' + lud + '&name=' + name
				})
			},
			onbtn() {
				this.sta = false
			},
			onbtn1() {
				this.stas = false
			},
			out(e) {
				console.log(e, 11111);
				this.sta = true
			},
			btn() {
				console.log(3333333);
				this.sta = !this.sta
			},
			mark(e) {
				const marker = this.covers.find(item => {
					return item.id == e.detail.markerId
				});
				console.log(marker.address, 5555555555);
				this.conten = marker.callout.content
				this.content=marker.address
				this.lat = marker.latitude
				this.lud = marker.longitude
				const juy = Object.values(marker.callout.content)
				console.log(juy);
				if (juy.includes("投")) {
					console.log("字典里面包含投放点");
					this.stas = true
				} else {
					this.sta = true
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.meng {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);

		/* 半透明黑色背景 */
		.tan {
			width: 70%;
			height: 30vh;
			background-color: white;
			border-radius: 10px;
			position: fixed;
			top: 20%;
			left: 18%;
			z-index: 999;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
			/* 加上阴影效果 */

			.tan1 {
				.header {
					width: 100%;
					height: 7vh;
					text-align: center;
					font-size: 20px;
					line-height: 6vh;
				}

				.content {
					width: 100%;
					height: 14vh;
					display: flex;

					.im {
						width: 35%;
						height: 14vh;
						margin-left: 2vh;
						margin-right: 1vh;
					}

					.ad {
						width: 55%;
						height: 14vh;
						line-height: 3.5vh;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;

				}
			}
		}

		.scd {
			width: 5vh;
			height: 5vh;
			border-radius: 50%;
			position: fixed;
			top: 52vh;
			left: 28vh;
			background-color: salmon;
			text-align: center;
			line-height: 4.5vh;
			background-color: rgba(0, 0, 0, 0.5);
			color: white;
			border: 1 solid white;
		}
	}

	.meng1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>